<main id="report_pay">
  <hl-page-header title="收支业务报表" class="mb-20">
		<hl-button type="outline" @on-click="incomeExport" v-if="quanxian.indexOf('c372')">导出</hl-button>
	</hl-page-header>
  <div class="search-container">
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">项目</div>
      <div>
        <hl-select :data="projectList" v-model="projectIdSelect" :width="200"></hl-select>
      </div>
    </div>
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">信息搜索</div>
      <div class="global_search">
        <span class="icon-Gm-search"></span>
        <input v-model="keyword" autocomplete="off" type="text" class="global_ipt_text"
          placeholder="客户名称/合同编号" @keyup.enter="search" />
      </div>
    </div>
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">账单类型</div>
      <div>
        <hl-select :data="costList" v-model="costSelect" :width="200" class="mr-10"></hl-select>
      </div>
    </div>
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">账单日期</div>
      <div>
        <web-calendar v-model="billDate" tips="账单日期" width="156"></web-calendar>
      </div>
    </div>
    <hl-button @on-click="search" size="mini">查询</hl-button>
    <hl-button @on-click="reset" size="mini">重置</hl-button>
  </div>

  <div class="screening-container">
    <div class="screening-item">
      <div class="mr-10 screening-title">合同状态</div>
      <div>
        <hl-checkbox-button :data="contractStatus" v-model="selectedContract" @on-click="contractClick" merge></hl-checkbox-button>
        </hl-checkbox-button>
      </div>
    </div>
    <div class="screening-item ml-10">
      <div class="mr-10 screening-title">付款状态</div>
      <div>
        <hl-checkbox-button :data="payStatus" v-model="selectedPay"  @on-click="payClick" merge></hl-checkbox-button>
      </div>
      <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar"></span>
    </div>
  </div>

  <!-- <div class="rent-content br-4 global_table relative" style="padding:0;">
    <table>
      <thead>
        <tr class="global_table_title">
          <th>序</th>
          <th>项目名称</th>
          <th>客户名称</th>
          <th>签订类型</th>
          <th>招商人员</th>
          <th>合同编号</th>
          <th>变更单号</th>
          <th>退租单号</th>
          <th>合同状态</th>
          <th>合同起始日</th>
          <th>合同终止日</th>
          <th>免租周期</th>
          <th>免租天数</th>
          <th>单元</th>
          <th>合同面积(m²)</th>
          <th>测绘面积(m²)</th>
          <th>单元数</th>
          <th>付款周期</th>
          <th>合同总金额(元)</th>
          <th>押金(元)</th>
          <th>押金实收金额(元)</th>
          <th>账单类型</th>
          <th>账单起始日期</th>
          <th>账单截止日期</th>
          <th>单价</th>
          <th>单价变价</th>
          <th>应收金额(元)</th>
          <th>已减免金额(元)</th>
          <th>应收款时间</th>
          <th>回款负责人</th>
          <th>实收金额(元)</th>
          <th>收款时间</th>
          <th>收款方式</th>
          <th>剩余未收款(元)</th>
          <th>付款状态</th>
          <th>开票日期</th>
          <th>开票金额</th>
          <th>发票号码</th>
          <th>发票类型</th>
          <th>联系人</th>
          <th>联系方式</th>
          <th>联系人邮箱</th>
          <th>备注</th>
        </tr>
        <thead>
        <tbody>
          <tr v-for="(item, index) in data" class="global_table_item">
            <td>{{index+1}}</td>
            <th>{{ item.projectName }}</th>
            <th>{{ item.zlfName }}</th>
            <th>
							<span v-if="item.signType">{{ item.signType == 'N' ? '新签' : '续签' }}</span>
							<span v-else>--</span>
						</th>
            <th>{{ item.operatorName }}</th>
            <th>{{ item.cCode || '--' }}</th>
            <th>{{ item.alterNo || '--' }}</th>
            <th>{{ item.wcode || '--' }}</th>
            <th>{{ item.contractStatus | contractState }}</th>
            <th>{{ item.contractBeginDate | UTCdate }}</th>
            <th>{{ item.contractEndDate | UTCdate }}</th>
            <th>
							<div v-if="item.freeDate">
								<p v-for="item1 in item.freeDate.split(',')">{{ item1 }}</p>
							</div>
							<span v-else>--</span>
						</th>
            <th>{{ item.freeDateNum }}</th>
            <th>
              <div v-if="item.unitName">
								<p v-for="item1 in item.unitName.split(',')">{{ item1 }}</p>
							</div>
							<span v-else>--</span>
            </th>
            <th>{{ item.rentUnitAcreage }}</th>
            <th>{{ item.acreage || '--' }}</th>
            <th>{{ item.czCount }}</th>
            <th>{{ item.paymentPeriod }}</th>
            <th>{{ item.totalAmount }}</th>
            <th>{{ item.deposit }}</th>
						<th>{{item.depositPayed || '0'}}</th>
            <th>{{ item.billName }}</th>
            <th>{{ item.billBeginDate | UTCdate }}</th>
            <th>{{ item.billEndDate | UTCdate }}</th>
            <th>{{ item.rentPrice }}</th>
            <th>
							<div v-if="item.rentIncresePrice">
								<p v-for="item1 in item.rentIncresePrice.split(',')">{{ item1 }}</p>
							</div>
							<span v-else>--</span>
						</th>
            <th>{{ item.amountReceive || '--' }}</th>
            <th>{{ item.derateAmount }}</th>
            <th>{{ item.balanceTime | UTCdate }}</th>
            <th>{{ item.repoMan || '--' }}</th>
            <th>
							<div v-if="item.amountPayed">
								<p v-for="item1 in item.amountPayed.split(',')">{{ item1 }}</p>
							</div>
							<span v-else>--</span>
						</th>
            <th>
							<div v-if="item.paymentTime">
								<p v-for="item1 in item.paymentTime.split(',')">{{ item1 }}</p>
							</div>
							<span v-else>--</span>
						</th>
            <th>
							<div v-if="item.paymentWay">
								<p v-for="item1 in item.paymentWay.split(',')">{{ item1 | paymentWay }}</p>
							</div>
							<span v-else>--</span>
						</th>
            <th>{{ item.outstandPay || '0' }}</th>
            <th>{{ item.paymentState | paymentState }}</th>
            <th>
							<div v-if="item.issueTime">
								<p v-for="item1 in item.issueTime.split(',')">{{ item1 }}</p>
							</div>
							<span v-else>--</span>
						</th>
            <th>
							<div v-if="item.invoiceAmount">
								<p v-for="item1 in item.invoiceAmount.split(',')">{{ item1 }}</p>
							</div>
							<span v-else>--</span>
						</th>
            <th>
							<div v-if="item.invoiceNumber">
								<p v-for="item1 in item.invoiceNumber.split(',')">{{ item1 }}</p>
							</div>
							<span v-else>--</span>
						</th>
            <th>
							<div v-if="item.invoiceType">
								<p v-for="item1 in item.invoiceType.split(',')">{{ item1 == 'NM' ? "普通发票" : '专用发票' }}</p>
							</div>
							<span v-else>--</span>
						</th>
            <th>{{ item.contactName || '--' }}</th>
            <th>{{ item.contactPhone || '--' }}</th>
            <th>{{ item.contactEmail || '--' }}</th>
            <th>
							<div v-if="item.remarks">
								<p v-for="item1 in item.remarks.split(',')">{{ item1 }}</p>
							</div>
							<span v-else>--</span>
						</th>
          </tr>
        </tbody>
    </table>
  </div> -->

  <el-table :data="data" height="400" border  style="width: 100%">
      <el-table-column type="index" label="序" width="70" align="center"></el-table-column>
      <el-table-column  prop="projectName" label="项目名称" width="180" align="center"></el-table-column>
      <el-table-column  prop="zlfName" label="客户名称" width="180" align="center"></el-table-column>
      <el-table-column  prop="signType" label="签订类型" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.signType == 'N' ? '新签' : '续签' }}</div></template>
      </el-table-column>
      <el-table-column  prop="operatorName" label="招商人员" width="180" align="center"></el-table-column>
      <el-table-column  prop="cCode" label="合同编号" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.cCode | formatUndefined }}</div></template>
      </el-table-column>
      <el-table-column  prop="alterNo" label="变更单号" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.alterNo | formatUndefined }}</div></template>
      </el-table-column>
      <el-table-column  prop="wCode" label="退租单号" width="360" align="center">
        <template slot-scope="scope"><div>{{ scope.row.wCode | formatUndefined }}</div></template>
      </el-table-column>
      <el-table-column  prop="contractStatus" label="合同状态" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.contractStatus | contractState }}</div></template>
      </el-table-column>
      <el-table-column  prop="contractBeginDate" label="合同起始日" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.contractBeginDate | UTCdate }}</div></template>
      </el-table-column>
      <el-table-column  prop="contractEndDate" label="合同终止日" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.contractEndDate | UTCdate }}</div></template>
      </el-table-column>
      <el-table-column  prop="freeDate" label="免租周期" width="180" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.freeDate">
            <div v-for="(item,i) in scope.row.freeDate.split(',')">{{ item }}</div>
          </div>
          <div v-if="!scope.row.freeDate">--</div>
        </template>
      </el-table-column>
      <el-table-column  prop="freeDateNum" label="免租天数" width="180" align="center"></el-table-column>
      <el-table-column  prop="unitName" label="单元" width="280" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.unitName">
            <div v-for="(item,i) in scope.row.unitName.split(',')">{{ item }}</div>
          </div>
          <div v-if="!scope.row.unitName">--</div>
        </template>
      </el-table-column>
      <el-table-column  prop="rentUnitAcreage " label="合同面积(m²)" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.rentUnitAcreage | formatNum }}</div></template>
      </el-table-column>
      <el-table-column  prop="acreage" label="测绘面积(m²)" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.acreage | formatNum }}</div></template>
      </el-table-column>
      <el-table-column  prop="czCount" label="单元数" width="180" align="center"></el-table-column>
      <el-table-column  prop="paymentPeriod" label="付款周期" width="180" align="center"></el-table-column>
      <el-table-column  prop="totalAmount" label="合同总金额(元)" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.totalAmount | formatNum }}</div></template>
      </el-table-column>
      <el-table-column  prop="deposit" label="押金(元)" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.deposit | formatNum }}</div></template>
      </el-table-column>
      <el-table-column  prop="depositPayed" label="押金实收金额(元)" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.depositPayed | formatNum }}</div></template>
      </el-table-column>
      <el-table-column  prop="billName" label="账单类型" width="180" align="center"></el-table-column>
      <el-table-column  prop="billBeginDate" label="账单起始日期" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.billBeginDate | UTCdate }}</div></template>
      </el-table-column>
      <el-table-column  prop="billEndDate " label="账单截止日期" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.billEndDate  | UTCdate }}</div></template>
      </el-table-column>
      <el-table-column  prop="rentPrice" label="单价" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.rentPrice  | formatNum }}</div></template>
      </el-table-column>
      <el-table-column  prop="rentIncresePrice" label="单价变价" width="280" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.rentIncresePrice">
            <div v-for="(item,i) in scope.row.rentIncresePrice.split(',')">{{ item }}</div>
          </div>
          <div v-if="!scope.row.rentIncresePrice">--</div>
        </template>
      </el-table-column>
      <el-table-column  prop="amountReceive" label="应收金额(元)" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.amountReceive  | formatNum }}</div></template>
      </el-table-column>
      <el-table-column  prop="derateAmount" label="已减免金额(元)" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.derateAmount  | formatNum }}</div></template>
      </el-table-column>
      <el-table-column  prop="balanceTime" label="应收款时间" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.balanceTime  | UTCdate }}</div></template>
      </el-table-column>
      <el-table-column  prop="repoMan" label="回款负责人" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.repoMan  | formatUndefined }}</div></template>
      </el-table-column>
      <el-table-column  prop="amountPayed" label="实收金额(元)" width="180" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.amountPayed">
            <div v-for="(item,i) in scope.row.amountPayed.split(',')">{{ item }}</div>
          </div>
          <div v-if="!scope.row.amountPayed">--</div>
        </template>
      </el-table-column>
      <el-table-column  prop="paymentTime" label="收款时间" width="180" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.paymentTime">
            <div v-for="(item,i) in scope.row.paymentTime.split(',')">{{ item }}</div>
          </div>
          <div v-if="!scope.row.paymentTime">--</div>
        </template>
      </el-table-column>
      <el-table-column  prop="paymentWay" label="收款方式" width="180" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.paymentWay">
            <div v-for="(item,i) in scope.row.paymentWay.split(',')">{{ item }}</div>
          </div>
          <div v-if="!scope.row.paymentWay">--</div>
        </template>
      </el-table-column>
      <el-table-column  prop="outstandPay" label="剩余未收款(元)" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.outstandPay  | formatNum }}</div></template>
      </el-table-column>
      <el-table-column  prop="taxAmount" label="付款状态" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.paymentState  | paymentState }}</div></template>
      </el-table-column>
      <el-table-column  prop="issueTime" label="开票日期" width="180" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.issueTime">
            <div v-for="(item,i) in scope.row.issueTime.split(',')">{{ item }}</div>
          </div>
          <div v-if="!scope.row.issueTime">--</div>
        </template>
      </el-table-column>
      <el-table-column  prop="invoiceAmount" label="开票金额" width="180" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.invoiceAmount">
            <div v-for="(item,i) in scope.row.invoiceAmount.split(',')">{{ item }}</div>
          </div>
          <div v-if="!scope.row.invoiceAmount">--</div>
        </template>
      </el-table-column>
      <el-table-column  prop="invoiceNumber" label="发票号码" width="180" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.invoiceNumber">
            <div v-for="(item,i) in scope.row.invoiceNumber.split(',')">{{ item }}</div>
          </div>
          <div v-if="!scope.row.invoiceNumber">--</div>
        </template>
      </el-table-column>
      <el-table-column  prop="invoiceType" label="发票类型" width="180" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.invoiceType">
            <div v-for="(item,i) in scope.row.invoiceType.split(',')">{{ item == 'NM' ? "普通发票" : '专用发票'  }}</div>
          </div>
          <div v-if="!scope.row.invoiceType">--</div>
        </template>
      </el-table-column>
      <el-table-column  prop="contactName" label="联系人" width="180" align="center"></el-table-column>
      <el-table-column  prop="contactPhone" label="联系方式" width="180" align="center"></el-table-column>
      <el-table-column  prop="contactEmail" label="联系人邮箱" width="180" align="center">
        <template slot-scope="scope"><div>{{ scope.row.contactEmail | formatUndefined }}</div></template>
      </el-table-column>
      <el-table-column  prop="remarks" label="备注" width="680" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.remarks">
            <div v-for="(item,i) in scope.row.remarks.split(',')">{{ item }}</div>
          </div>
          <div v-if="!scope.row.remarks">--</div>
        </template>
      </el-table-column>
  </el-table>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount || '0'}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="getData"></hl-select>
        条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="getData"></hl-pagination>
    </div>
  </div>

</main>
<script src="modules/report_bi/scripts/report_pay.js" charset="utf-8"></script>
<style>
  #report_pay {
    padding: 0 24px;
  }

  .search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-bottom: 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .screening-container {
    display: flex;
    flex-wrap: wrap;
  }



  .screening-item {
    display: flex;
    align-items: center;
  }


  .el-table .cell{
    /* padding: 10px 0; */
    line-height: 46px;
  }

  .el-table thead th{
  	background: #f0f2ff;
  }
  .el-table th>.cell{
  	color: #a5aab7;
  	font-weight: 500;
  }
  .el-table tr:nth-child(2n){
    background: #f9f9f9;
  }
  .el-table tr:hover{
    background: #f0f0f7;
  }

  .el-table td div{
    border-bottom:1px dotted #eee;
  }
  .el-table td div:last-child{
    border-bottom:none;
  }
</style>
